<template>
  <div class="padding height-100 border-box">
    <el-amap
      ref="map"
      class="map-component"
      map-style="amap://styles/macaron"
      :center="[119.41, 32.39]"
      :zoom="11"
      :events="mapEvents"
    >
      <div
        v-if="false"
        class="data-button"
        :style="{ backgroundColor: themeColor }"
        @click="clickButton"
      >
        <span class="flex-center button-icon">
          <svg-icon name="arrow-right"></svg-icon>
        </span>
        <span class="button-text">监管企业情况TOP5</span>
      </div>
      <table-modal v-if="false" ref="modal" @change="onChange"></table-modal>
    </el-amap>
  </div>
</template>

<script>
import Vue from 'vue';
import VueAMap from '@/plugins/amap';
import TableModal from './table-modal';
import Navigate2enterpriseAnalysis from '@/mixins/navigate2enterpriseAnalysis';

Vue.use(VueAMap);
export default {
  name: 'geolocation-monitor',
  mixins: [Navigate2enterpriseAnalysis],
  components: {
    TableModal
  },
  data() {
    return {
      map: null,
      mapEvents: {
        init: map => {
          this.$store.dispatch('GET_ENTERPRISE_LIST').then(() => {
            this.map = map;

            this.getPoints(this.$store.state.energyEnterpriseList).then(points => {
              const markers = this.createMarkers(points);
              map.add(markers);
            });
          });
        }
      }
    };
  },
  computed: {
    themeColor() {
      return this.$store.state.user.theme;
    },
  },
  methods: {
    clickButton() {
      this.$refs.modal.open();
    },
    getPoints(data) {
      return new Promise(resolve => {
        data = data.map(v => ({
          id: v.id,
          enterpriseId: v.enterpriseId,
          pos:
            v.longitude && v.latitude
              ? [Number(v.longitude), Number(v.latitude)]
              : null,
          addr: v.name
        }));
        resolve(data.filter(v => !!v.pos));
      });
    },
    createMarkers(points) {
      let markers = null;
      const AMap = window.AMap;
      if (AMap) {
        markers = points.map(v => {
          const position = new AMap.LngLat(...v.pos);
          const content = `
            <div class="padding popper-marker">${v.addr}</div>
          `;
          const marker = new AMap.Marker({
            position: position,
            content: content,
            anchor: 'bottom-center',
            offset: new AMap.Pixel(0, 0)
          });
          marker.on('click', () => {
            if (!v.id) return false;
            this.navigateToEnterpriseAnalysis({
              enterpriseCode: v.id,
              enterpriseId: v.enterpriseId,
            }, 'enterpriseCode');
          });
          return marker;
        });
      }
      return markers;
    },
    createMarkerText(positions, address) {
      let markers = null;
      const AMap = window.AMap;
      if (AMap) {
        markers = positions.map((v, i) => {
          const position = new AMap.LngLat(...v);
          return new AMap.Text({
            position: position,
            text: address[i],
            anchor: 'top-center'
          });
        });
      }
      return markers;
    },
    onChange(data) {
      // console.log(data)
      const map = this.map;
      if (!map) return false;
      map.clearMap();
      this.getPoints(data).then(points => {
        const markers = this.createMarkers(points);
        map.add(markers);
        map.setFitView();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.map-component {
  position: relative;
}
.data-button {
  display: flex;
  flex-direction: column;
  padding: 15px 12px;
  border-radius: 20px;
  font-size: 16px;
  z-index: 99;
  position: absolute;
  left: 0;
  bottom: 0;
  color: #f9f9f9;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  &:hover {
    color: #ffffff;
    box-shadow: 0 0 10px 6px rgba(0, 0, 0, 0.1);
  }
}
.button-icon {
  border: 1px solid white;
  border-radius: 50%;
}
.button-text {
  margin-top: 10px;
  letter-spacing: 2px;
  writing-mode: vertical-lr;
  cursor: default;
}
</style>
